<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>state</title>
  </head>
  <body>
    <div id="test">我是一段文本</div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this)
          const { name, age, sex } = this.props
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age + 1}</li>
            </ul>
          )
        }
      }

      // 限制方式一：
      // React 版本 16 之前（具体15.5）
      // Person.propTypes = {
      //   name: React.PropTypes.string
      // }

      // 限制方式二：
      // React 版本 16 及之后
      Person.propTypes = {
        name: PropTypes.string.isRequired, // 必传 isRequired 代表这个属性必须要有，而不是说有这个属性但是值为空（这种情况不会报错）
        sex: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func // function 要简写
      }

      // 指定默认属性，缺失字段时使用
      Person.defaultProps = {
        sex: '男'
      }

      // 方式一：
      // 原始方式
      // ReactDOM.render(
      //   <Person name="tom" age="18" sex="女" />,
      //   document.getElementById('test')
      // )

      // 方式二：
      // ES6 赋值（...展开运算符）
      const pData = { name: 'tom', age: 18, sex: '' }
      ReactDOM.render(<Person {...pData} />, document.getElementById('test'))
    </script>
  </body>
</html>
